<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import {useSys} from '@/hooks/useSys'
import {scanCode} from '@/utils/uni-api-wrap/scan-code'
import to from 'await-to-js'
import {getFileNameAndExtension, urlParse} from '@/utils/utils'
import {navigateTo} from '@/utils/uni-api-wrap/route'
import {fetchBannerList,fetchArticleList} from '@/api/banner'
import {chooseLocation, getLocation, openLocation} from '@/utils/uni-api-wrap/location'
import {downloadFile, openDocument} from '@/utils/uni-api-wrap/file'
import {tip} from '@/utils/uni-api-wrap/toast'
import {previewImage} from '@/utils/uni-api-wrap/media'
import PageList from '@/components/page-list/index.vue'
import {onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
import {stopPullDownRefresh} from '@/utils/uni-api-wrap/page'

const { safeArea } = useSys()

const bannerList = ref([]);
const articleList = ref([]);
const pageListRef = ref(null)

const scan = async () => {
  const [err, {result, path}] = await to(scanCode({ scanType: ['qrCode', 'datamatrix'] }))
  if (err) return
  console.log('scan', result, path)
  if (result?.includes('/pages/scan') || path?.includes('/pages/scan')) {
    navigateTo(result || path)
  } else {
    tip('不是当前系统的信息')
  }
}

const fetchBanner = async () => {
  const [err, result] = await to(fetchBannerList())
  if (err) return
  bannerList.value = result.data.list
}

onMounted(fetchBanner)
// onMounted(async () => {
//   const [err, result] = await to(fetchArticleList({ page: { next: "", size: 10 } } ))
//   if (err) return
//   articleList.value = result.data.list
// })


const bannerClick = async item => {
  if (item.name.includes('address')) {
    const { latitude, longitude, name, address } = urlParse(item.name)
    openLocation({ latitude: parseFloat(latitude), longitude: parseFloat(longitude), name, address })
  } else {
    previewImage([item.image])
  }
}


const previewFile = url => downloadFile(url).then(res => res.tempFilePath).then(filePath => openDocument(filePath, getFileNameAndExtension(filePath).extension))

const articleClick = item => {
  if (item.type === 1 || item.type === 3 || item.type === 4) {
    // type: 1-文章 3-视频 4-链接
    navigateTo(`/pages/article/index?id=${item.id}`)
  } else if (item.type === 2) {
    previewFile(item.fileUrl)
  }
}

onPullDownRefresh(async () => {
  await fetchBanner()
  await pageListRef.value?.refresh()
  stopPullDownRefresh()
})

onReachBottom(() => {
  pageListRef.value?.next()
})

</script>

<template>
  <view class="index-page__container">
    <view class="header__scanBar" :style="{ top: `${safeArea.top + 10}px` }" @click="() => navigateTo('/pages/scan/index')">
      <icon-simple class="inline-block-middle" name="register" :size="16" />
      <view class="register__text inline-block-middle">报名</view>
    </view>
    <view class="header__container mlr32 flex-row" :style="{ paddingTop: `${safeArea.top}px` }">
      <image class="header__logo" src="https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/71/8a76c895e24afcc8c5e82ab329d9f9063876119769.png" mode="aspectFill" />
<!--      <view class="header__title">欢迎来到广东省因私出入境移民协会小程序！</view>-->
    </view>
    <view class="container">
      <swiper class="banner__container" autoplay indicator-dots indicator-active-color="#ffffff95">
        <swiper-item class="banner-item__container" v-for="item in bannerList" :key="item.id" @click="bannerClick(item)">
          <image class="banner__image" :src="item.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
      <page-list ref="pageListRef" method="post" url="/base/article/pages" height="unset" :refresher-triggered="false">
        <template #default="{ list, firstLoading, loading, has_next }">
          <view class="list__container">
            <view class="list-item__container flex-row" v-for="item in list" :key="item.id" @click="articleClick(item)">
              <image class="list-item__cover" :src="item.image" mode="aspectFill" v-if="item.type !== 3"></image>
              <video class="list-item__cover" :src="item.fileUrl" object-fit="fill" v-if="item.type === 3"></video>
              <view class="list-item__information">
                <view class="list-item__title">{{ item.title }}</view>
                <view class="list-item__subtitle">{{ item.subTitle }}</view>
                <view class="list-item__context">{{ item.digest }}</view>
              </view>
            </view>
          </view>
        </template>
      </page-list>
    </view>
  </view>
</template>

<style scoped lang="scss">
.index-page__container {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  font-size: 0;
  background: #0b22ae url("https://mini-gdeia.oss-cn-guangzhou.aliyuncs.com/2024/54/a1912e8929bc43a313a0dc1dfd5a3ea71233939090.jpg") no-repeat;
  background-size: contain;
  background-position: 0 100rpx;

  &::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    height: 100rpx;
    background-color: #152ac2;
  }
}
.header__scanBar {
  position: fixed;
  left: 32rpx;
  padding: 10rpx 20rpx;
  border-radius: 40rpx;
  background-color: rgba(#000, .3);
  z-index: 100;
  .register__text {
    margin-left: 10rpx;
    @include fs28w400(#fff);
  }
}
.header__container {
  position: relative;
  align-items: flex-start;
  .header__title {
    padding-left: 32rpx;
    @include fs36w600(#fff);
    text-align: left;
  }
  .header__logo {
    margin-top: 100rpx;
    flex: 0 0 220rpx;
    width: 220rpx;
    height: 220rpx;
  }
  //&::before {
  //  position: absolute;
  //  left: 0;
  //  bottom: 0;
  //  content: '';
  //  width: 0;
  //  height: 0;
  //  border-left: 50vw solid transparent;
  //  border-right: 50vw solid transparent;
  //  border-bottom: 140rpx solid #fff;
  //}
}
.header__container,
.header__cover {
  height: 450rpx;
}
.container {
  margin: 15rpx 12rpx;
  padding: 8rpx;
  border-radius: 9.5rpx;
  background-color: rgba(#fff, .5);
}
.banner__container,
.banner-item__container,
.banner__image {
  width: 710rpx;
  height: 375rpx;
}
.banner__container {
  margin: 0 auto;
}
.list__container {
  .list-item__container {
    margin-top: 20rpx;
    padding: 10rpx;
    border-radius: 10rpx;
    background-color: #F6F9FF;
    align-items: flex-start;
    overflow: hidden;
    .list-item__cover {
      position: relative;
      flex: 0 0 174rpx;
      border-radius: 10rpx;
      width: 174rpx;
      height: 174rpx;
      overflow: hidden;
      &::before {
        position: absolute;
        display: block;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
      }
    }
    .list-item__information {
      margin-left: 36.5rpx;
      .list-item__title {
        @include fs36w600;
        text-align: left;
      }
      .list-item__subtitle {
        @include fs28w400;
        text-align: left;
      }
      .list-item__context {
        @include fs28w400($kaoyan-color-9);
        text-align: left;
        @include text-overflow-lines;
      }
    }
  }
}
</style>
